﻿@typeparam TValue
@inherits Blazorise.Select<TValue>
@using Blazorise.Extensions
<CascadingValue Value="@this" IsFixed="true">
    <div @ref="@ElementRef" id="@ElementId" class="@ContainerClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" @attributes="@Attributes">
        <div id="@SelectorElementId" class="ant-select-selector" @onclick="@OnSelectorClickHandler">
            @if ( Multiple )
            {
                @foreach ( var selectedValue in SelectedValues ?? Enumerable.Empty<TValue>() )
                {
                    <span class="ant-select-selection-item">
                        <span class="ant-select-selection-item-content">
                            @{
                                var selectItem = SelectItems.FirstOrDefault( i => i.Value.IsEqual( selectedValue ) );

                                @selectItem?.ChildContent;
                            }
                        </span>
                        <span class="ant-select-selection-item-remove" unselectable="on" aria-hidden="true" style="user-select: none;">
                            <span role="img" aria-label="close" class="anticon anticon-close" style="vertical-align: 0.125em;" @onclick="@(_ => RemoveSelectedItem(selectedValue))">
                                <svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                    <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
                                </svg>
                            </span>
                        </span>
                    </span>
                }
            }
            else
            {
                <span class="ant-select-selection-search">
                    <input id="@InputElementId" class="ant-select-selection-search-input" role="combobox" tabindex="@TabIndex" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" readonly="true" multiple="@Multiple" aria-haspopup="listbox" aria-owns="@SelectListId" aria-controls="@SelectListId" aria-expanded="false" autocomplete="off" aria-autocomplete="list" unselectable="on">
                </span>
                <span class="ant-select-selection-item">
                    @SelectedItem
                </span>
            }
        </div>
        @if ( Loading )
        {
            <span class="ant-select-arrow ant-select-arrow-loading" unselectable="on" aria-hidden="true" style="user-select: none;">
                <span role="img" aria-label="loading" class="anticon anticon-loading">
                    <svg viewBox="0 0 1024 1024" focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z">
                        </path>
                    </svg>
                </span>
            </span>
        }
        else
        {
            <span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;">
                <span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z">
                        </path>
                    </svg>
                </span>
            </span>
        }
    </div>
    <div @ref="@DropdownElementRef" class="@DropdownClassNames" style="@DropdownStyleNames" tabindex="-1" @onblur="@OnDropdownBlur">
        <div>
            <div role="listbox" style="@DropdownInnerStyleNames">
                @ChildContent
            </div>
        </div>
    </div>
</CascadingValue>
@Feedback
